<template>
  <div class="news">
    <ul>
      <li v-for="item in newsList" :key="item.id">
        <!-- 这是第一种写法 query参数-->
        <!-- <RouterLink
          :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`"
          >{{ item.title }}</RouterLink
        > -->

        <!-- 第二种写法 对象写法 query参数-->
        <!-- <RouterLink
          :to="{
            path: '/news/detail',
            query: {
              id: item.id,
              title: item.title,
              content: item.content,
            },
          }"
          >{{ item.title }}
        </RouterLink> -->

        <!--第一种写法 params参数 -->
        <!-- <RouterLink
          :to="`/news/detail/${item.id}/${item.title}/${item.content}`"
          >{{ item.title }}</RouterLink
        > -->

        <!-- 第二种写法 params参数，这里必须用name，不可以用path需要注意，并且传递的参数不可是数组或者是对象 -->
        <RouterLink
          :to="{
            name: 'xiangqing',
            params: {
              id: item.id,
              title: item.title,
              content: item.content,
            },
          }"
          >{{ item.title }}</RouterLink
        >&nbsp;

        <button @click="showNewsDetail(item)">点击我去{{ item.title }}</button>
      </li>
    </ul>

    <!-- 展示区 -->
    <div class="news-content">
      <RouterView />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { RouterLink, useRouter } from "vue-router";

const newsList = reactive([
  {
    id: "dwijadiwa01",
    title: "很好的抗癌食物",
    content: "西兰花",
  },
  {
    id: "dwijadiwa02",
    title: "如何一夜暴富",
    content: "IT",
  },
  {
    id: "dwijadiwa03",
    title: "震惊！！万万没想到",
    content: "明天是周一",
  },
  {
    id: "dwijadiwa03",
    title: "好消息！好消息！",
    content: "快过年了",
  },
]);

// 编程式路由导航，用的是Router路由器。因为它可以控制你跳转到任何地方，所以是Router，要区分开来
const router = useRouter();

interface newsInter {
  id: string;
  title: string;
  content: string;
}

// 编程路由导航，和RouterLink一样to里面可以写什么，push里面一样可以写，可以写字符串或者是对象，push可以改成replace，其他的都一样，还是要注意params不可以与path一起，需要name
function showNewsDetail(news: newsInter) {
  router.push({
    name: "xiangqing",
    params: {
      id: news.id,
      title: news.title,
      content: news.content,
    },
  });
}
</script>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  padding-left: 10px;
}

.news ul li::marker {
  color: #64967e;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>
